<template lang="pug">
  el-drawer.commonDrawer(
    title="巡检发卡"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="960px"
    @close="$_handleCancel"
  )
    .drawer-content(v-loading="loading")
      s-table(
        ref="table"
        reqMethod="get"
        :reqUrl="tableObj.url"
        style="padding: 0"
        :column="tableObj.columnConfig"
        :filterProps="{fields: tableObj.seachConfig}"
      )
        template(slot="type" slot-scope="text, scope") {{dictFilter(text, 'xj_conclusion_type')}}
        template(slot="action" slot-scope="text, scope")
          el-popconfirm(
            :title="`请确认是否${scope.card ? '销卡' : '发卡'}}`"
            @confirm="() => sendHandle(scope.id)"
            @onConfirm="() => sendHandle(scope.id)"
          )
            el-link(:underline="false" type="primary" slot="reference") {{scope.card ? '销卡' : '发卡'}}
    modal-form(
      title="发卡"
      :visible.sync="sendObj.visible"
      :fields="sendForm"
      :layoutCol="{sm:24, md: 24, lg: 24}"
      :submitting="sendSubmitting"
      :submitHandle="sendSubmit"
    )
</template>
<script>
import { api } from '../api'
import { sendColumnConfig, sendSeachConfig } from '../config'
import { sendCard } from '../api'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      tableObj: {
        url: api.targetList,
        columnConfig: sendColumnConfig,
        seachConfig: sendSeachConfig
      },
      sendSubmitting: false,
      sendObj: {
        visible: false,
        info: {}
      }
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    sendForm () {
      return [
        {
          key: 'card',
          label: '卡号'
        },
        {
          key: 'cardCode ',
          label: '卡内码'
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.refreshTable()
      }
    }
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    // 发卡
    sendHandle (id) {
      this.sendObj = {
        visible: true,
        id
      }
    },
    // 发卡
    sendSubmit (values) {
      const { sendObj } = this
      console.log(values)
      this.sendSubmitting = true
      sendCard({
        ...values,
        id: sendObj.id
      }).then(() => {
        this.$message.success('发卡成功')
        this.sendObj = {
          visible: false,
          id: ''
        }
        this.refreshTable()
      }).finally(() => {
        this.sendSubmitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
